<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>08_盒子模型-组成部分</title>
        <style>
            div {
                /* width和height是给盒子的内容设置的 */
                width: 200px;
                height: 200px;
                background-color: aquamarine;

                /* 内边距 */
                padding: 10px;

                /* 边框 */
                border: 5px solid black;

                /* 外边距 */
                margin: 30px;

                /* 总结：一个盒子的实际大小 = 内容 + 内边距 + 边框 
                 外边距不计入盒子大小
                 平时我们所说的宽和高实际是给盒子内容的
                */

            }
        </style>
    </head>
    <body>
        <div>
            包子和胡辣汤
        </div>
    </body>
</html>